import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
// 导入乾坤
import qiankun from './qiankun'
// 一个进度条插件
// import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const routes = [
  {
    /**
     * path: 路径为 / 时触发该路由规则
     * name: 路由的 name 为 Home
     * component: 触发路由时加载 `Home` 组件
     */
    path: '/',
    name: 'Home',
    component: Home
  }
]
/**
 * 注册路由实例
 * 即将开始监听 location 变化，触发路由规则
 */
const router = new VueRouter({
  mode: 'history',
  routes
})
Vue.use(VueRouter)

Vue.config.productionTip = false
// 启用乾坤
Vue.use(qiankun, {
  // 开启沙箱
  sandbox: {
    /**
     * 默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。
     */
    strictStyleIsolation: true,
    /**
     * 当 experimentalStyleIsolation 被设置为 true 时，qiankun 会改写子应用所添加的样式为所有样式规则增加一个特殊的选择器规则来限定其影响范围，因此改写后的代码会表达类似为如下结构：
     // 假设应用名是 react16
      .app-main {
        font-size: 14px;
      }
      div[data-qiankun-react16] .app-main {
        font-size: 14px;
      }
    */
    experimentalStyleIsolation: true
  }
})
// startQiankun()
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
